<template>
  <div class="app-container">
    <div style="display:flex">
      <div id="main" :style="{width: '75%', height: '600px'}"></div>
      <div id="pie" :style="{width: '25%', height: '500px'}"></div>
    </div>
    <!-- <el-button @click="show">show</el-button> -->
  </div>
</template>

<script>
import { getProvincialgdp } from "@/api/stats";
export default {
  data() {
    return {
      Provincialgdp: {},
      option1: {},
      option2: {},
      year: "2019"
    };
  },
  computed: {
    routesData() {
      return this.routes;
    }
  },
  mounted() {
    // Mock: get all routes and roles list from server
    this.getProvincialgdpData();

    var echarts = require("echarts");

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表

    this.option1 = {
      title: {
        text: "浙江省1978-2018一、二、三产业产值统计"
      }
    };
    myChart.setOption(this.option1);
  },
  methods: {
    async getProvincialgdpData() {
      this.Provincialgdp = await getProvincialgdp();
      this.Provincialgdp = this.Provincialgdp.data;
      console.log(this.Provincialgdp);

      var echarts = require("echarts");

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      var pieChart = echarts.init(document.getElementById("pie"));

      this.option1 = {
        title: {
          text: "浙江省1978-2018一、二、三产业产值统计"
        },
        legend: {
          data: ["第一产业", "第二产业", "第三产业", "总和"],
          selected: {
            第一产业: true,
            第二产业: true,
            第三产业: true,
            总和: false
          }
        },
        toolbox: {
          // y: 'bottom',
          feature: {
            magicType: {
              type: ["stack", "tiled"]
            },
            dataView: {},
            saveAsImage: {
              pixelRatio: 2
            }
          }
        },

        tooltip: {},
        xAxis: {
          data: this.Provincialgdp.year,
          splitLine: {
            show: false
          }
        },
        yAxis: {},

        series: [
          {
            name: "第一产业",
            type: "bar",
            data: this.Provincialgdp.first,
            animationDelay: function(idx) {
              return idx * 10;
            }
          },
          {
            name: "第二产业",
            type: "bar",
            data: this.Provincialgdp.second,
            animationDelay: function(idx) {
              return idx * 10 + 100;
            }
          },
          {
            name: "第三产业",
            type: "bar",
            data: this.Provincialgdp.third,
            animationDelay: function(idx) {
              return idx * 10 + 100;
            }
          },
          {
            name: "总和",
            type: "bar",
            data: this.Provincialgdp.total,
            animationDelay: function(idx) {
              return idx * 10 + 100;
            }
          }
        ],
        animationEasing: "elasticOut",
        animationDelayUpdate: function(idx) {
          return idx * 5;
        }
      };

      this.option2 = {
        title: {
          text: this.year + "年产业分布",
          left: "center"
        },

        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 0,
          top: 0,
          bottom: 20,
          data: ["第一产业","第二产业","第三产业"]
        },

        series: [
          {
            type: "pie",
            radius: "60px%",
            center: ["50%", "50%"],
            data: [
                {value:this.Provincialgdp.first[40],name:"第一产业"},
                {value:this.Provincialgdp.second[40],name:"第二产业"},
                {value:this.Provincialgdp.third[40],name:"第三产业"},
            ],
                
            
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };

      myChart.setOption(this.option1);
      pieChart.setOption(this.option2);
      var that  = this
      myChart.on("click", function(params) {
        console.log(params);
        that.year = params.name
        console.log(that.year)
        that.option2.title.text = that.year+"年产业分布"
        that.option2.series[0].data[0].value = that.Provincialgdp.first[that.year-1978]
        that.option2.series[0].data[1].value = that.Provincialgdp.second[that.year-1978]
        that.option2.series[0].data[2].value = that.Provincialgdp.third[that.year-1978]
        pieChart.setOption(that.option2)
      });
    }
    // show(){
    //     console.log(this.Provincialgdp)
    // }
  }
};
</script>

